<template>
    <el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <el-col :span="12" class="mb20">
      <el-form-item prop="uri" :label="$t('ApiLog.uri')">
        <el-input v-model="form.uri" :placeholder="$t('ApiLog.inputUriTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="method" :label="$t('ApiLog.method')">
        <el-input v-model="form.method" :placeholder="$t('ApiLog.inputMethodTip')" clearable show-word-limit :maxlength="10"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="headers" :label="$t('ApiLog.headers')">
        <el-input type="textarea" v-model="form.headers" :placeholder="$t('ApiLog.inputHeadersTip')" clearable show-word-limit :maxlength="512"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="queryString" :label="$t('ApiLog.queryString')">
        <el-input type="textarea" v-model="form.queryString" :placeholder="$t('ApiLog.inputQueryStringTip')" clearable show-word-limit :maxlength="65535"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="body" :label="$t('ApiLog.body')">
        <el-input type="textarea" v-model="form.body" :placeholder="$t('ApiLog.inputBodyTip')" clearable show-word-limit :maxlength="65535"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="response" :label="$t('ApiLog.response')">
        <el-input type="textarea" v-model="form.response" :placeholder="$t('ApiLog.inputResponseTip')" clearable show-word-limit :maxlength="65535"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="ip" :label="$t('ApiLog.ip')">
        <el-input v-model="form.ip" :placeholder="$t('ApiLog.inputIpTip')" clearable show-word-limit :maxlength="20"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="beginDate" :label="$t('ApiLog.beginDate')">
        <el-input v-model="form.beginDate" :placeholder="$t('ApiLog.inputBeginDateTip')" clearable show-word-limit :maxlength="20"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="endDate" :label="$t('ApiLog.endDate')">
        <el-input v-model="form.endDate" :placeholder="$t('ApiLog.inputEndDateTip')" clearable show-word-limit :maxlength="20"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="elapsedTime" :label="$t('ApiLog.elapsedTime')">
        <el-input v-model="form.elapsedTime" :placeholder="$t('ApiLog.inputElapsedTimeTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="ApiLogDialog">
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/bizs/ApiLog'
const emit = defineEmits(['refresh']);

// 定义i18n
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// 定义字典
import { useDict } from '/@/hooks/dict';

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const dataFormRef = ref();

// 提交表单数据
const form = reactive({
	id: '',
	uri: '',
	method: '',
	headers: '',
	queryString: '',
	body: '',
	response: '',
	ip: '',
	beginDate: '',
	endDate: '',
	elapsedTime: '',
});

// 定义校验规则
import { rule } from '/@/utils/validate';
const dataRules = ref({
    uri: [ {required: false, message: t('ApiLog.inputUriTip'), trigger: 'blur'} ],
    method: [ {required: false, message: t('ApiLog.inputMethodTip'), trigger: 'blur'} ],
    headers: [ {required: false, message: t('ApiLog.inputHeadersTip'), trigger: 'blur'} ],
    queryString: [ {required: false, message: t('ApiLog.inputQueryStringTip'), trigger: 'blur'} ],
    body: [ {required: false, message: t('ApiLog.inputBodyTip'), trigger: 'blur'} ],
    response: [ {required: false, message: t('ApiLog.inputResponseTip'), trigger: 'blur'} ],
    ip: [ {required: false, message: t('ApiLog.inputIpTip'), trigger: 'blur'} ],
    beginDate: [ {required: false, message: t('ApiLog.inputBeginDateTip'), trigger: 'blur'} ],
    endDate: [ {required: false, message: t('ApiLog.inputEndDateTip'), trigger: 'blur'} ],
    elapsedTime: [ {required: false, message: t('ApiLog.inputElapsedTimeTip'), trigger: 'blur'} ],
})

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true
  	form.id = ''

  	// 重置表单数据
 	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  	// 获取信息
  	if (id) {
		form.id = id
		initFormData(id)
  	}
};

// 初始化表单
const initFormData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 提交表单
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? t('common.editSuccessText') : t('common.addSuccessText'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 暴露变量
defineExpose({
  openDialog
});
</script>